<template>
  <div class="video">
    <Tab :category="category" :currentItem="currentItem" @tabClick="tabClick"></Tab>
    <VideoList :videos="videos" @loadMore="loadMore"></VideoList>
  </div>
</template>

<script>
import Tab from '@/components/tabs/Tab';
import VideoList from '@/components/list/VideoList';
export default {
  data() {
    return {
      id: '',
      currentItem: '现场',
      category: '',
      videos: [],
      offset: 0,
    };
  },
  computed: {},
  created() {
    this.getVideoList();
  },
  components: { Tab, VideoList },
  methods: {
    //获取视频标签
    async getVideoList() {
      const { data } = await this.$request('/video/category/list');
      this.category = data;
      //初始化请求第一个标签下的数据
      this.id = data[0].id;
      this.getVideos();
    },
    //获取标签下的视频
    async getVideos() {
      const res = await this.$request('/video/group', { id: this.id, offset: this.offset });
      this.videos.push(...res.datas);
    },
    //点击分类回调
    tabClick(id) {
      this.id = id;
      this.videos = [];
      this.getVideos();
    },
    loadMore(size) {
      this.offset = size + 8;
      this.getVideos();
    },
  },
};
</script>

<style scoped lang='scss'>
</style>